<template>
	<view class="Content">
		<u-modal :show-cancel-button="true" confirm-text="确认退出" cancel-text="继续跑步" @confirm="GoBack" v-model="showmodal"
			:content="contentmodal"></u-modal>
		<u-navbar :is-back="false" title="运动">
			<u-icon v-if="IsEnd" @click="GoBack" name="arrow-left" size="32" class="Back" label="返回"></u-icon>
		</u-navbar>
		<view class="RunMessage">
			<view class="NumMessage">
				<view><span class="Num">{{(num/1000).toFixed(2)}}</span>公里</view>
				{{num}}
				<view>
					上一个位置{{longitude2}},{{latitude2}}
				</view>
				<view>
					下一个位置{{longitude1}},{{latitude1}}
				</view>
			</view>
			<view class="RunControl">
				<view style="display: flex;flex-direction: row;justify-content: space-around">
					<view class="RunControlBox">
						<view>{{AvgSpeed}}</view>
						<view>平均配速</view>
					</view>
					<view class="RunControlBox">
						<view>{{time}}</view>
						<view>总计时间</view>
					</view>
				</view>
				<view class="ButtonBox" v-if="!IsEnd">
					<view @click="End" v-if="Pause" style="background-color: #fa3534;">
						<u-icon color="#fff" name="checkbox-mark" size="20px"></u-icon>
						<view>结束</view>
					</view>
					<view @click="PauseRun" :style="{background:!Pause?'#2979ff':'#ff9900'}">
						<u-icon color="#fff" name="play-right" size="20px" v-show="Pause"></u-icon>
						<view v-show="Pause">继续</view>
						<u-icon color="#fff" name="pause" size="20px" v-show="!Pause"></u-icon>
						<view v-show="!Pause">暂停</view>
					</view>
				</view>
			</view>
			<!-- <u-icon style="margin: 30px auto;" size="60" name="/static/map.png" @click="Map"></u-icon> -->
		</view>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	export default {
		data() {
			return {
				amapPlugin: null,
				key: '8e29bf1752cd249b3c66c0d260540628',
				showmodal: false,
				contentmodal: '',
				systemTime: '',
				StuID: '',
				IsEnd: false,
				Pause: false,
				num: 0,
				time: '00:00:00',
				timer: '',
				AvgSpeed: "0'00''",
				getcoordinater: '',
				hours: 0,
				minutes: 0,
				seconds: 0,
				longitude1: 0,
				latitude1: 0,
				longitude2: 0,
				latitude2: 0,
				watchingLocationChange: false
			}
		},
		onLoad() {
			let _this = this
			let value = uni.getStorageSync('UserMsg')
			if (!value) {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			} else {
				this.StuID = value.StuID
				this.amapPlugin = new amap.AMapWX({
					key: this.key
				});
			}
		},
		methods: {
			toRad(d) {
				return d * Math.PI / 180;
			},
			getDisance(lat1, lng1, lat2, lng2) {
				var dis = 0;
				var radLat1 = this.toRad(lat1);
				var radLat2 = this.toRad(lat2);
				var deltaLat = radLat1 - radLat2;
				var deltaLng = this.toRad(lng1) - this.toRad(lng2);
				var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(
					radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
				return dis * 6378137;
			},
			GetCoordinate() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log("后续", res)
						_this.longitude2 = _this.longitude1,
							_this.latitude2 = _this.latitude1
						_this.longitude1 = res.longitude,
							_this.latitude1 = res.latitude,
							console.log("现有坐标：" + _this.longitude1 + ',' + _this.latitude1)
						console.log("距离", _this.getDisance(_this.latitude2, _this
							.longitude2, _this
							.latitude1, _this.longitude1))
						if (Math.round(_this.getDisance(_this.latitude2, _this
								.longitude2, _this
								.latitude1, _this.longitude1)) > 1.2) {
							_this.num += Math.round(_this.getDisance(_this.latitude2, _this
								.longitude2, _this
								.latitude1, _this.longitude1))
							if (_this.num != 0) {
								_this.AvgSpeed = ((_this.hours * 60 + _this.minutes + Math
										.floor(((_this.seconds / 60) * 100)) / 100) / ((
										_this.num / 1000).toFixed(2))).toFixed(2).split(".")
									.join("'") + "''"
							}
						}
					},
					fail(info) {
						console.log(info)
					}
				});

			},
			startTimer() {
				this.seconds += 1;
				if (this.seconds >= 60) {
					this.seconds = 0;
					this.minutes = this.minutes + 1;
				}
				if (this.minutes >= 60) {
					this.minutes = 0;
					this.hours = this.hours + 1;
				}
				this.time = (this.hours < 10 ? '0' + this.hours : this.hours) + ':' + (this.minutes < 10 ? '0' + this
					.minutes :
					this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
			},
			// 暂停倒计时
			PauseRun() {
				if (this.Pause == false) {
					clearInterval(this.timer);
					clearInterval(this.getcoordinater);
					this.timer = null
					this.getcoordinater = null
					this.Pause = true
				} else {
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							console.log("初始化", res)
							this.longitude1 = res.longitude,
								this.latitude1 = res.latitude
							console.log("初始化坐标：" + this.longitude1 + ',' + this.latitude1)
							this.getcoordinater = setInterval(this.GetCoordinate, 2000)
							this.timer = setInterval(this.startTimer, 1000)
						}
					});
					this.Pause = false
				}
			},
			GetDate() {
				let nowDate = new Date()
				let date = {
					year: nowDate.getFullYear(),
					month: nowDate.getMonth() + 1,
					date: nowDate.getDate()
				}
				this.systemTime = date.year + '-' + date.month + '-' + date.date
			},
			End() {
				// this.num = 1200
				// this.minutes = 26
				// this.seconds = 43
				// this.AvgSpeed = "9'36''"
				this.GetDate()
				let _this = this
				this.$u.post('/personalCenter/get/personalInformation', {
					id: this.StuID.toString()
				}).then(res => {
					let km = (_this.num / 1000) > 5 ? 5 : (_this.num / 1000)
					if (km >= 1) {
						if (res.rst.gender == false) {
							if (_this.AvgSpeed.split("''")[0].split("'")[0] >= 5 && _this.AvgSpeed.split("''")[0]
								.split("'")[0] < 9) {
								this.$u.post('/motion/upload/data', {
									id: this.StuID.toString(),
									mileage: (this.num / 1000).toString(),
									speed: (((this.num / 1000) / parseFloat((this.hours + (this.minutes /
										60) + (this.seconds / 3600)))).toFixed(2)).toString(),
									duration: this.time,
									date: this.systemTime
								}).then(res => {
									_this.IsEnd = true
									console.log(res)
								})
							} else {
								this.contentmodal = "配速应在5-9分范围内，当前为无效成绩，确认结束并退出吗"
								this.showmodal = true;
							}
						} else {
							if (_this.AvgSpeed.split("''")[0].split("'")[0] >= 6 && _this.AvgSpeed.split("''")[0]
								.split("'")[0] < 9) {
								this.$u.post('/motion/upload/data', {
									id: this.StuID.toString(),
									mileage: (this.num / 1000).toString(),
									speed: (((this.num / 1000) / parseFloat((this.hours + (this.minutes /
										60) + (this.seconds / 3600)))).toFixed(2)).toString(),
									duration: this.time,
									date: this.systemTime
								}).then(res => {
									_this.IsEnd = true
									console.log(res)
								})
							} else {
								this.contentmodal = "配速应在6-9分范围内，当前为无效成绩，确认结束并退出吗"
								this.showmodal = true;
							}
						}
					} else {
						this.contentmodal = "里程小于1公里"
						this.showmodal = true;
					}
				})
			},
			GoBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
		destroyed: function() {
			// 每次离开当前界面时，清除定时器
			clearInterval(this.timer);
			clearInterval(this.getcoordinater);
			this.timer = null
			this.getcoordinater = null
		},
		mounted() {

			// this.amapPlugin.getRegeo({
			// 	success: (data) => {
			// 		// console.log(data)
			// 		// this.latitude1 = data[0].latitude
			// 		// this.longitude1 = data[0].longitude
			// 		console.log("首次获取", data)
			// 		this.getcoordinater = setInterval(this.GetCoordinate, 1000)
			// 	},
			// 	fail: (info) => {
			// 		console.log(info)
			// 	}
			// });

			let _this = this
			// _this.getcoordinater = setInterval(_this.GetCoordinate, 1000)
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log("初始化", res)
					_this.longitude1 = res.longitude,
						_this.latitude1 = res.latitude
					console.log("初始化坐标：" + _this.longitude1 + ',' + _this.latitude1)
					_this.getcoordinater = setInterval(_this.GetCoordinate, 2000)
				}
			});
			// this.getcoordinater = setInterval(this.GetCoordinate, 1000)
			this.timer = setInterval(this.startTimer, 1000);
		}
	}
</script>


<style lang="scss" scoped>
	.RunMessage {
		display: flex;
		flex-direction: column;
		margin: 20px 0;
	}

	.NumMessage {
		display: table-cell;
		vertical-align: bottom;
		margin: 0 auto;
		height: 120px;
		font-size: 16px;
	}

	.Num {
		font-size: 48px;
	}

	.RunControl {
		margin-top: 40px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 20px;
		width: 100%;
	}

	.RunControl>view {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.RunControlBox>view:nth-child(1) {
		font-weight: bold;
	}

	.RunControlBox>view:nth-child(2) {
		color: #909399;
		font-size: 12px;
	}

	#map1 {
		position: relative;
		height: 100vh;
		width: 100vm;
	}

	.ButtonBox>view>view {
		margin: 5px 0;
		font-size: 16px;
		color: #fff;
	}

	.ButtonBox>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #fff;
		margin: 20px auto;
		height: 100px;
		width: 100px;
		border-radius: 100%;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

	}
</style>
